<template>
  <h2>Home Page</h2>
  <el-button type="primary" @click="getUser">获取用户信息</el-button>
  <el-button type="primary" @click="getMenu">获取菜单信息</el-button>
  <el-button type="primary" icon="el-icon-search">搜索</el-button>

  <div class="root">
    <el-table
      :data="tableData"
      class="table"
      style="width: 100%"
      :fit='true'
      :default-sort="{prop: 'id', order: 'descending'}"
    >
      <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                       :key="index" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template #default="scope">
          <el-button size="small" type="warning" icon="Star" round @click="add(scope.$index, scope.row)" >增加</el-button>
          <el-button size="small" type="primary" icon="Edit" round @click="edit(scope.$index, scope.row)" >修改</el-button>
          <el-button size="small" type="success" icon="Search" round @click="search(scope.$index, scope.row)" >查询</el-button>
          <el-button size="small" type="danger" icon="Delete" round @click="del(scope.$index, scope.row)" >删除</el-button>
          <!--                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
          <!--                    <el-button size="small" type="primary" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'index',
  data() {
    return {
      tableHeader: {
        id: "ID",
        username: "姓名",
        job: "部门",
        date:"申请时间"
      },
      tableData: []
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },

    add (index, row) {
      console.log(index, row.username)
    },
    edit (index, row) {
      console.log(index, row.username)
    },
    search (index, row) {
      console.log(index, row.username)
    },
    del (index, row) {
      console.log(index, row.username)
    },
    // handleDelete (index, row) {
    //   console.log(index, row.username)
    // }
    async getData() {
      const vpnuserData = await this.$api.vpnuserlist()
      this.tableData = vpnuserData.data
    },
    getUser () {
      axios.get('http://localhost:10000/user').then(function (res) {
        alert(JSON.stringify(res.data))
      }).catch(function (res) {
        alert(res)
      })
    },
    getMenu () {
      axios.get('http://localhost:10000/menu').then(function (res) {
        alert(JSON.stringify(res.data))
      }).catch(function (res) {
        alert(res)
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.root {
  margin: 20px 25px 0px 25px;
}

/deep/.el-table .cell{
  display: flex;
  justify-content: center;
}
</style>
